import React, { useState, useRef } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import './index.css'
import {
    Form,
    Input,
    Button,
    Radio,
    Select,
    Cascader,
    DatePicker,
    InputNumber,
    TreeSelect,
    Switch,
    Checkbox,
    message,
} from 'antd';
import Modal from 'antd/lib/modal/Modal';
import Upload from './Upload';

// 导入api
import * as api from '@/api/product'

// 声明类型
type Iprops = {
    visible: boolean;
    onOk: any;
    onCancel: any;
    handleGetCategory: any
}

const { RangePicker } = DatePicker;
const { TextArea } = Input;

const Dialog = (props: Iprops) => {
    let { visible, handleGetCategory } = props;
    //上传之后的图片地址
    let [categoryImgurl, setCategoryImgurl] = useState("")

    //获取Form的实例
    let categoryForm = useRef(null)
    // console.log(visible);
    const onFinish = (values: any) => {
        console.log('Success:', values);
        // console.log('Failed:', errorInfo);
        if (!categoryImgurl) {
            //如果没有上传图片
            message.error('请上传类目图片')
        } else {
            //发起请求
            api.addCategory(values.categoryName, values.categoryImgurl)
                .then(res => {
                    console.log(res.data)
                    if (res.data.state) {
                        //添加成功
                        message.success('添加成功')
                        //更新列表 父组件传递下来的
                        handleGetCategory()
                    }
                })
        }
    };

    const onFinishFailed = (errorInfo: any) => {
        message.error('请传入类目的名称')
    };

    //上传图片之后,可以获取服务器返回的图片地址,通过此方法进行设置
    let handleSetCategoryImgurl = (imgUrl:string) => {
        setCategoryImgurl(imgUrl)
        console.log(imgUrl)
    }

    const [componentDisabled, setComponentDisabled] = useState<boolean>(true);
    const onFormLayoutChange = ({ disabled }: { disabled: boolean }) => {
        setComponentDisabled(disabled);
    };

    return (
        <Modal title='添加商品' open={visible} cancelText='取消' okText='确定' onOk={() => {
            props.onOk(categoryForm)
        }} onCancel={() => {
            props.onCancel()
        }}>
            <Form
                ref={categoryForm}
                name="basic"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 14 }}
                layout="horizontal"
                onValuesChange={onFormLayoutChange}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item label="
        图片标题:" rules={[{ required: true, message: '请输入图片名称' }]}>
                    <Input placeholder='请输入图片名称' />
                </Form.Item>
                <Form.Item label="简要标题" >
                    <Input placeholder='请输入标题' />
                </Form.Item>

                <div className='in'>
                    <Form.Item label="编号" className='info'>
                        <Input placeholder='请输入' className='info-ipt' />
                    </Form.Item>
                    <Form.Item label="产地" className='info'>
                        <Input placeholder='请输入' className='info-ipt' />
                    </Form.Item>
                    <Form.Item label="材质" className='info'>
                        <Input placeholder='请输入' className='info-ipt' />
                    </Form.Item>
                    <Form.Item label="品牌" className='info'>
                        <Input placeholder='请输入' className='info-ipt' />
                    </Form.Item>
                </div>
                <div className='in'>
                    <Form.Item label="重量" className='info'>
                        <Input placeholder='请输入(kg)' className='info-ipt' />
                    </Form.Item>
                    <Form.Item label="单位" className='info'>
                        <Select className='info-ipt'
                            showSearch
                            placeholder="请选择">
                        </Select>
                    </Form.Item>
                    <Form.Item label="价格" className='info'>
                        <Input placeholder='请输入(元)' className='info-ipt' />
                    </Form.Item>
                    <Form.Item label="市场价" className='info'>
                        <Input placeholder='请输入(元)' className='info-ipt' />
                    </Form.Item>
                </div>

                <Form.Item label="内容概要">
                    <TextArea rows={4} />
                </Form.Item>
                <Form.Item label="图片上传" valuePropName="fileList">
                    {/* <Upload action="/upload.do" listType="picture-card">
                        <div>
                            <PlusOutlined />
                            <div style={{ marginTop: 8 }}>Upload</div>
                        </div>
                    </Upload> */}
                    <Upload />
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default Dialog